<template>
  <div class="dashboard">
    <el-card>
      <div slot="header"><span v-text="cardTitle" /></div>
      <!-- card body -->
      <el-row>
        <el-col :span="6"> <g2-dashboard :chart="dChart1" /> </el-col>
        <el-col :span="6"> <g2-dashboard :chart="dChart2" /> </el-col>
        <el-col :span="6"> <g2-dashboard :chart="dChart3" /> </el-col>
        <el-col :span="6"> <g2-dashboard :chart="dChart4" /> </el-col>
        <el-col :span="8"> <g2-pie :chart="pChart1" /> </el-col>
        <el-col :span="8"> <g2-pie :chart="pChart2" /> </el-col>
        <el-col :span="8"> <g2-pie :chart="pChart3" /> </el-col>
      </el-row>
      <g2-histogram :chart="hChart1" />
      <g2-guide :chart="gChart1" />
    </el-card>
  </div>
</template>

<script>
import G2Histogram from "../../components/Antv/G2Histogram";
import G2Dashboard from "../../components/Antv/G2Dashboard";
import G2Pie from "../../components/Antv/G2Pie";
import G2Guide from "../../components/Antv/G2Guide";
export default {
  name: "Dashboard",
  data() {
    return {
      cardTitle: "统计台 -- 数据",
      dChart1: {
        id: "db1",
        data: [{ value: 1.6 }]
      },
      dChart2: {
        id: "db2",
        data: [{ value: 3.5 }]
      },
      dChart3: {
        id: "db3",
        data: [{ value: 6.5 }]
      },
      dChart4: {
        id: "db4",
        data: [{ value: 8.5 }]
      },
      hChart1: {
        id: "h1",
        data: [
          { genre: "Title1", sold: 275 },
          { genre: "Title2", sold: 315 },
          { genre: "Title3", sold: 120 },
          { genre: "Title4", sold: 350 },
          { genre: "Title5", sold: 150 }
        ]
      },
      pChart1: {
        id: "p1",
        data: [
          { type: "评估中", percent: 0.53 },
          { type: "设计中", percent: 0.38 },
          { type: "正在开发", percent: 0.39 },
          { type: "已上线", percent: 0.29 }
        ]
      },
      pChart2: {
        id: "p2",
        data: [
          { type: "评估中", percent: 0.63 },
          { type: "设计中", percent: 0.18 },
          { type: "正在开发", percent: 0.29 },
          { type: "已上线", percent: 0.19 }
        ]
      },
      pChart3: {
        id: "p3",
        data: [
          { type: "评估中", percent: 0.43 },
          { type: "设计中", percent: 0.28 },
          { type: "正在开发", percent: 0.19 },
          { type: "已上线", percent: 0.39 }
        ]
      },
      gChart1: {
        id: "g1",
        data: []
      }
    };
  },
  components: {
    G2Histogram,
    G2Dashboard,
    G2Pie,
    G2Guide
  }
};
</script>
